<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>统战成员学习平台</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/binding.css"/>
    <style>
        html, body {
            height: 100%;
            overflow: hidden;
        }


    </style>
</head>
<body>
<div id='app' style="display:none" v-show="true" class="main_bg">
    <header>
        <div>
            <span tapmode onclick="closeWin()" class="left"><i class="icon_back_white"></i></span>
            <p style="color:#fff">统战学习平台</p>
        </div>
    </header>
    <div class="login_container" :class="{'hidden': hidden}" style="height: 90%;overflow: scroll;">
        <div class="logo_c">
            <img class="logo" :class="{'hidden': hidden}" src="../image/logo.png">
            <p>完善信息</p>
        </div>
        <div class="login_form">
            <div class="item ui_border_b">
                <input v-model="usrName" type="text" placeholder="姓名" @focus="inputFocus()" @blur="inputBlur()">
            </div>
            <div class="item ui_border_b">
                <select v-model="usrSex" name="usrSex" id="usrSex" class="tzSelect" @focus="inputFocus()" @blur="inputBlur()">
                    <option value="">请选择性别</option>
                    <option :value="item.pareKey" v-for="item of usrSexList">{{item.pareValue}}</option>
                </select>
            </div>
            <div class="item ui_border_b">
                <input v-model="usrPhone" type="text" placeholder="手机号" @focus="inputFocus()" @blur="inputBlur()" style="width: 50%;display: inline">
                <input v-model="checkCode" type="text" placeholder="验证码" v-show="sms.smsIsSend" style="width: 20%;display: inline">
                <span @click="sendMsg()">{{sms.smsMsg}}</span>
            </div>
            <div class="item ui_border_b">
                <select v-model="usrNation" name="usrNation" id="usrNation" class="tzSelect" @focus="inputFocus()" @blur="inputBlur()">
                    <option value="">请选择民族</option>
                    <option :value="item.pareKey" v-for="item of usrNationList">{{item.pareValue}}</option>
                </select>
            </div>
            <div class="item ui_border_b">
                <select @change="onPOrgChange()" v-model="usrPartycommittee" name="usrPartycommittee" id="usrPartycommittee" class="tzSelect" @focus="inputFocus()" @blur="inputBlur()">
                    <option value="">请选择党派团体</option>
                    <option :value="item.orgId" v-for="item of pOrgList">{{item.orgName}}</option>
                </select>
            </div>
            <div class="item ui_border_b">
                <select v-model="branchId" name="branchId" id="branchId" class="tzSelect" @focus="inputFocus()" @blur="inputBlur()">
                    <option value="">请选择支部</option>
                    <option :value="item.orgId" v-for="item of orgList">{{item.orgName}}</option>
                </select>
            </div>
            <div class="item ui_border_b">
                <select @change="onFirstUnitChange()" v-model="firstUnit" name="firstUnit" id="firstUnit" class="tzSelect" @focus="inputFocus()" @blur="inputBlur()">
                    <option value="">请选择一级单位</option>
                    <option :value="item.unitId" v-for="item of pUnitList">{{item.unitName}}</option>
                </select>
            </div>
            <div class="item ui_border_b">
                <select v-model="secondUnit" name="secondUnit" id="secondUnit" class="tzSelect" @focus="inputFocus()" @blur="inputBlur()">
                    <option value="">请选择二级单位</option>
                    <option :value="item.unitId" v-for="item of unitList">{{item.unitName}}</option>
                </select>
            </div>
            <div class="item ui_border_b">
                <select v-model="politicalStatus" name="politicalStatus" id="politicalStatus" class="tzSelect" @focus="inputFocus()" @blur="inputBlur()">
                    <option value="">请选择政治面貌</option>
                    <option :value="item.dictCode" v-for="item of politicalStatusList">{{item.dictName}}</option>
                </select>
            </div>

        </div>
        <div tapmode="tap" class="binding_btn" @click="binding()">绑定</div>
    </div>
</div>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/layer_mobile/layer.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            hidden: false,
            usrPassword: '',
            checked: false,
            height: '100%',

            politicalStatusList: [],
            pOrgList: [],
            orgList: [],
            pUnitList: [],
            unitList: [],
            usrNationList: [],
            usrSexList: [],
            usrName: '',
            usrSex: '',
            usrPhone: '',
            usrAccount: '',
            usrNation: '',
            usrPartycommittee: '',
            branchId: '',
            firstUnit: '',
            secondUnit: '',
            usrNetId: '',
            politicalStatus: '',
            smsTimeout: 120,
            checkCode: '',
            checkCodeKey: '',
            sms: {
                smsMsg: '获取验证码',
                smsIsSend: false,
                smsTimeout: 120,
                smsCode: ''
            },
        },
        mounted: function () {
            var $this = this;
            apiready = function () {
                var header = $api.dom('header');
                $api.fixStatusBar(header);
                sbsm.opened();

                $this.getPoliticalStatus();
                $this.getUsrNationList();
                $this.getUsrSexList();
                $this.getOrgById();
                $this.getUnitById();

                $this.usrNetId = api.pageParam.usrNetId;
            }
        },
        methods: {
            getUsrNationList: function () {
                var $this = this;
                get('/client/cas/queryByType?typeCode=NATIONALITY', function (ret) {
                    $this.usrNationList = ret.list || [];
                });
            },
            getUsrSexList: function () {
                var $this = this;
                get('/client/cas/queryByType?typeCode=STUDENTSEX', function (ret) {
                    $this.usrSexList = ret.list || [];
                });
            },
            getPoliticalStatus: function () {
                var $this = this;

                get('/client/cas/getPoliticalStatus', function (data) {
                    $this.politicalStatusList = data || [];
                });
            },
            getOrgById: function (orgPId) {
                var $this = this;

                get('/client/cas/getOrgById?orgPId=' + (orgPId || 0), function (data) {
                    if (!orgPId) {
                        $this.pOrgList = data;
                    } else {
                        $this.orgList = data;
                    }
                });

            },
            onPOrgChange: function () {
                var $this = this;
                if ($this.usrPartycommittee) {
                    $this.getOrgById($this.usrPartycommittee);
                }
            },
            getUnitById: function (unitPId) {
                var $this = this;

                get('/client/cas/getUnitById?unitPId=' + (unitPId || 0), function (data) {
                    if (!unitPId) {
                        $this.pUnitList = data;
                    } else {
                        $this.unitList = data;
                    }
                });
            },
            onFirstUnitChange: function () {
                var $this = this;

                if ($this.firstUnit) {
                    $this.getUnitById($this.firstUnit);
                }
            },
            sendMsg: function () {
                var $this = this;
                if ($this.sms.smsIsSend) return;
                $this.sms.smsIsSend = true;

                if (!$this.usrPhone) {
                    return msgUtil.toast({msg: '请输入手机号码'});
                }
                if (!(/^((1[3-9]{1}[0-9]{1})+\d{8})$/.test($this.usrPhone))) {
                    return msgUtil.toast({msg: '请输入正确的手机号码'})
                }

                $this.checkoutPhone($this.usrPhone, function () {
                    post('/client/cas/mobilemsg', {
                        account: $this.usrPhone
                    }, function (ret) {
                        if (ret.isSuccess) {
                            msgUtil.toast({msg: '验证码已发送'});
                            $this.changeTime();
                            $this.checkCodeKey = ret.data;
                        } else {
                            msgUtil.toast({msg: ret.message || '验证码发送失败'});
                        }
                    });
                });

            },
            checkoutPhone: function (phone, callback) {
                var $this = this;
                if (!phone) {
                    return;
                }
                post('/client/cas/checkoutPhone', {
                    usrPhone: phone
                }, function (ret) {
                    if (!ret.isSuccess) {
                        return msgUtil.toast({msg: ret.message});
                    }

                    callback();
                });
            },
            changeTime: function (timeout) {
                var $this = this;
                var time = timeout || $this.sms.smsTimeout;
                var smsTinterval = setInterval(function () {
                    time = time - 1;
                    $this.sms.smsMsg = '重新发送(' + time + ')';
                    if (time <= 0) {
                        $this.sms.smsIsSend = false;
                        clearInterval(smsTinterval);
                    }
                }, 1000); //定时
            },
            binding: function () {
                var $this = this;
                if (!$this.usrName) {
                    return msgUtil.toast({msg: '请输入姓名'})
                }
                if (!/^[\u4e00-\u9fa5]{2,30}$|^[\u4e00-\u9fa5]{1,30}[·]?[\u4e00-\u9fa5]{2,30}$|^[a-zA-Z]{2,30}$/.test($this.usrName)) {
                    return msgUtil.toast({msg: '姓名由汉字加“·”组成，点最多一个，或者由纯英文组成'});
                }
                if (!$this.usrSex) {
                    return msgUtil.toast({msg: '请输选择性别'});
                }
                if (!$this.usrPhone) {
                    return msgUtil.toast({msg: '请输入手机号'});
                }
                if (!(/^((1[2-9]{1}[0-9]{1})+\d{8})$/.test($this.usrPhone))) {
                    return msgUtil.toast({msg: '手机号格式不正确'});
                }
                if (!$this.checkCode) {
                    return msgUtil.toast({msg: '请输入验证码'});
                }
                if (!$this.usrNation) {
                    return msgUtil.toast({msg: '请输选择民族'});
                }
                if (!$this.usrPartycommittee) {
                    return msgUtil.toast({msg: '请输选择党派团体'});
                }
                if (!$this.branchId) {
                    return msgUtil.toast({msg: '请输选择支部'});
                }
                if (!$this.firstUnit) {
                    return msgUtil.toast({msg: '请输选择一级单位'});
                }
                if (!$this.secondUnit) {
                    return msgUtil.toast({msg: '请输选择二级单位'});
                }
                if (!$this.politicalStatus) {
                    return msgUtil.toast({msg: '请输选择政治面貌'});
                }


                var params = {
                    usrNetId: $this.usrNetId,
                    usrName: $this.usrName,
                    usrSex: $this.usrSex,
                    usrPhone: $this.usrPhone,
                    usrAccount: $this.usrPhone,
                    usrNation: $this.usrNation,
                    usrPartycommittee: $this.usrPartycommittee,
                    branchId: $this.branchId,
                    firstUnit: $this.firstUnit,
                    secondUnit: $this.secondUnit,
                    politicalStatus: $this.politicalStatus,
                    checkCode: $this.checkCode,
                    checkCodeKey: $this.checkCodeKey
                };

                var loginLoading = msgUtil.loading();
                post('/client/wechat/wechatimproveInfo', params, function (ret) {
                    msgUtil.close(loginLoading);
                    if (ret.isSuccess) {
                        msgUtil.toast({msg: '绑定成功'});
                        $api.setStorage(_.USERINFO, ret.data);
                        api.openWin({
                            name: 'index_win',
                            url: '../html/index_win.html',
                            slidBackEnabled: false,
                            animation: {
                                type: 'none',
                                duration: 0
                            }
                        });
                    } else {
                        msgUtil.toast({msg: ret.message});
                    }
                });
            },
            inputFocus: function () {
                var $this = this;
                $this.hidden = true;
            },
            inputBlur: function () {
                var $this = this;
                $this.hidden = false;
            }
        }
    });
</script>
</body>
</html>
